import React, {PureComponent} from "react"
import "./index.less"
import {AlipayOutlined, FireOutlined, WechatOutlined} from '@ant-design/icons';
import {Button, Modal, Radio, Spin} from "antd";
import {defaultSize, HOST, WS} from "../../../../../shared/project-config"
import {withRouter} from "react-router"
import "animate.css"
import orderCompose from "./compose"
import ZrImageLoader from "libs/image-loader"
import {read} from "zr-react-toolbox";
import cs from "classnames"
import AppModal from "libs/app-modal"

//订单确认页(状态un_pay ---> paying)

export default @withRouter
@orderCompose
class OrderPaying extends PureComponent {
	render() {

		const {
			data,
			toBack,
			onMessage,
			onPayTypeSelect,
			countDown,
			toChangePayType,
			payLoading,
			payTypeVisible,
			$payTypeVisible
		} = this.props
		const {paymentType, payResponse, orderNo} = data

		return (
			<div className={'order-panel'}>

				{/*<Websocket*/}
				{/*	url={`ws://120.76.200.3:8080/order/${data['orderNo']}`}*/}
				{/*	onMessage={onMessage}*/}
				{/*/>*/}

				<h2 style={{paddingTop: 40}}>订单号:{orderNo}</h2>
				{
					countDown
						? <div className={'qr-tips normal'}>
							请在<b className={'count-down'}>{countDown}</b>内完成支付
						</div>
						: undefined
				}

				<AppModal visible={payLoading} closable={false} footer={false}>
					<div>
						<Spin/> <span>正在生成支付信息,请稍候....</span>
					</div>
				</AppModal>

				<AppModal visible={payTypeVisible}
				          maskClosable={false}
				          onOk={toChangePayType}
				          getContainer={"#zr-app-container"}
				          onCancel={() => $payTypeVisible(false)}>
					<h2 className={'pay-type-chooser'}>选择支付方式</h2>
					<Radio.Group className={cs('pay-type-radio')}
					             defaultValue={paymentType}
					             buttonStyle="solid"
					             onChange={onPayTypeSelect}>
						<Radio className={'wx'} value="WX">
							<div>
								<WechatOutlined/>
								<div>微 信</div>
							</div>
						</Radio>
						<Radio className={'ali'} value="ALI">
							<div>
								<AlipayOutlined/>
								<div>支付宝</div>
							</div>
						</Radio>
					</Radio.Group>
				</AppModal>

				{
					paymentType === 'WX'
						?
						<div>
							<div className={'qr-image-box'}>
								<ZrImageLoader src={`${HOST}/qr?text=${payResponse}`} text={'正在生成支付二维码,请稍候'}/>
							</div>
							<div className={'qr-tips'}>
								总共需要支付<b>{((read(data, 'feeDetail.total') || 0) / 100).toFixed(2)}</b><span>元</span>
							</div>
							<div className={'qr-tips'}>请使用<b>微信</b>客户端<b>扫一扫</b>扫描二维码支付</div>
						</div> : undefined
				}

				{
					paymentType === 'ALI' ?
						<div className={'ali-pay'}>
							<h1>请在打开的新页面中扫码支付</h1>
						</div> : undefined
				}

				<div style={{height: 40}}/>

				<p>
					<Button size={defaultSize} onClick={toBack}>
						返回我的订单
					</Button>
					<Button size={defaultSize} type={'primary'}
					        style={{marginLeft: 10}}
					        disabled={!countDown}
					        onClick={() => $payTypeVisible(true)}>
						<FireOutlined/> 重新选择支付方式
					</Button>
				</p>

				<div className={'order-buttons'}>

				</div>
			</div>
		);
	}

}
